<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑";
        }
        #l-map{
            height:100%;
            width:100%;
        }
        #driving_way{
            position: fixed;
            top: 10px;
            right: 20px;
            width: 270px;
            height: 450px;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
            padding: 10px
        }
        #result{
            height: 400px;
            overflow-y: auto;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=70D7EeD2qiltIUAynoiCN49c2buDK1Yo"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title>根据起终点经纬度查询公交换乘</title>
</head>
<body>
<div id="l-map"></div>

<div id="driving_way">
    <select>
        <option value="0">推荐方案</option>
        <option value="1">最少时间</option>
        <option value="2">最少换乘</option>
        <option value="3">最少步行</option>
        <option value="4">不乘地铁</option>
        <option value='5'>优先地铁</option>
    </select>
    <form action="" name="form1" id="form1">
        起始位置：
        <select name="start" id="start">
            <option value="107.491242,31.217154">四川文理学院（南坝路）</option>
            <option value="107.508469,31.220918">中心广场</option>
            <option value="107.477576,31.213587">罗浮广场</option>
            <option value="107.472822,31.23985">四川文理学院（莲湖校区）</option>
        </select><br/>
        终止位置：
        <select name="end" id="end">
            <option value="107.508469,31.220918">中心广场</option>
            <option value="107.491242,31.217154">四川文理学院（南坝路）</option>
            <option value="107.477576,31.213587">罗浮广场</option>
            <option value="107.472822,31.23985">四川文理学院（莲湖校区）</option>
        </select>
    <input  id='search' type="button" value="查询路线" onclick="tj()">
<%--        <input type="text" value="起始地点" onclick="selVal1(document.form1.start)">--%>
<%--        <input type="text" value="终止地点" onclick="selVal2(document.form1.end)">--%>
    </form>
<%--    <button id='search'>查询</button>--%>
    <p id='content'></p>
    <p id='result'></p>
</div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMapGL.Map("l-map");
    map.centerAndZoom(new BMapGL.Point(107.491242,31.217154), 14);

    // var start = new BMapGL.Point(116.302, 40.050)    //"四川文理学院南坝校区";
    // var end = new BMapGL.Point(116.358, 39.961);               //"中心广场";
    function tj(){
        var index1=document.getElementById("start").selectedIndex;
        retVal1=document.getElementById("start").options[index1].value;

        var a1=""
        var b1=""
        for(i=0;i<10;i++){
            a1+=""+retVal1[i]
        }
        for(i=11;i<retVal1.toString().length;i++){
            b1+=""+retVal1[i]
        }

        var index2=document.getElementById("end").selectedIndex;
        var retVal2=document.getElementById("end").options[index2].value;
        var a2=""
        var b2=""
        for(i=0;i<10;i++){
            a2+=""+retVal2[i]
        }
        for(i=11;i<retVal2.toString().length;i++){
            b2+=""+retVal2[i]
        }
        var start=new BMapGL.Point(a1,b1);
        var end=new BMapGL.Point(a2,b2);
        var routePolicy = [BMAP_TRANSIT_POLICY_RECOMMEND,BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS,BMAP_TRANSIT_POLICY_FIRST_SUBWAYS];
        var transit = new BMapGL.TransitRoute(map, {
            renderOptions: {map: map, panel: 'result'},
            policy: 0,
        });
        map.clearOverlays();
        var i= $("#driving_way select").val();
        search(start,end,routePolicy[i]);
        function search(start,end,route){
            transit.setPolicy(route);
            transit.search(start,end);
        }
    }

</script>
